<template>
	<z-paging ref="paging" v-model="indexList" @query="queryList" bg-color='#F7F9FA'>
    <view class="page-container">
      <!-- 顶部切换栏 -->
      <view class="segment-control">
        <uni-segmented-control 
          :current="current" 
          :values="items" 
          style-type="button" 
          active-color="#2b4af7" 
          @clickItem="onClickItem" 
        />
      </view>

      <!-- 搜索栏 -->
      <view class="search-bar">
        <u--input 
          placeholder="请输入小区名字" 
          suffixIcon="search" 
          confirm-type="search"
          suffixIconStyle="color: #909399" 
          @change="change"
          border="surround"
          clearable
        />
      </view>

      <!-- 筛选栏 -->
      <view class="filter-bar">
        <view class="filter-item" @click="openfw(1)">
          <text>{{quyu || '重庆市区'}}</text>
          <u-icon name="arrow-down" color="#3F51B5" size="10"></u-icon>
        </view>
        <view class="filter-item" @click="openfw(2)">
          <text>{{mianji || '面积'}}</text>
          <u-icon name="arrow-down" color="#3F51B5" size="10"></u-icon>
        </view>
        <view class="filter-item" @click="openfw(3)">
          <text>{{jiage || '价格'}}</text>
          <u-icon name="arrow-down" color="#3F51B5" size="10"></u-icon>
        </view>
        <view class="filter-item" @click="openfw(4)">
          <text>更多</text>
          <u-icon name="arrow-down" color="#3F51B5" size="10"></u-icon>
        </view>
      </view>

      <!-- 房源列表 -->
      <view class="house-list">
        <view class="house-item" v-for="(item,index) in indexList" :key="index" @click="tofwtail(item.id)">
          <view class="house-image">
            <image v-if='item.backgroundPic' :src="item.backgroundPic" mode="aspectFill"></image>
            <image v-if='!item.backgroundPic' :src="item.coverPicList[0]" mode="aspectFill"></image>
            <view class="house-title">{{item.cellName}}</view>
            <view class="auction-tag" v-if="item.auctionState === 0">即将开始</view>
            <view class="auction-tag ongoing" v-if="item.auctionState === 1">竞拍中</view>
            <view class="auction-tag ended" v-if="item.auctionState === 2">已结束</view>
          </view>
          <view class="house-info">
            <view class="house-header">
              <text class="auction-number">{{item.auctionNumber}}</text>
              <text class="house-name">{{item.title}}</text>
            </view>
            <view class="house-tags">
              <text class="area-tag">{{item.area}}m²</text>
              <text class="discount-tag" v-if="item.discount">{{item.discount}}</text>
            </view>
            <view class="price-info">
              <view class="price-item">
                <text class="label">起拍价</text>
                <text class="value highlight">{{item.startingPrice}}万</text>
              </view>
              <view class="price-item">
                <text class="label">市场价</text>
                <text class="value">{{item.marketPrice}}万</text>
              </view>
            </view>
            <view class="auction-info">
              <text class="time">起拍时间 {{getTime(item.auctionTime)}}</text>
              <text class="status">{{pmztlist[item.auctionState].label}}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 筛选弹窗 -->
      <u-popup :show="fwshow" @close="close" @open="open" mode="top">
        <view class="filter-popup">
          <view class="filter-tabs">
            <view 
              class="filter-tab" 
              v-for="(tab, index) in ['区域', '面积', '价格', '更多']" 
              :key="index"
              :class="{ active: fwtype === index + 1 }"
              @click="fytc(index + 1)"
            >
              {{tab}}
              <u-icon name="arrow-down" color="#3F51B5" size="10"></u-icon>
            </view>
          </view>

          <!-- 区域选择 -->
          <view class="filter-content" v-if="fwtype == 1">
            <view 
              class="filter-option" 
              :class="{ active: quyu === '' }"
              @click="clickqy('')"
            >不限</view>
            <view 
              class="filter-option" 
              v-for="(item,index) in quyulist" 
              :key="index"
              :class="{ active: quyu === item }"
              @click="clickqy(item)"
            >{{item}}</view>
          </view>

          <!-- 面积选择 -->
          <view class="filter-content grid" v-if="fwtype == 2">
            <view 
              class="filter-option" 
              v-for="(item,index) in mjlist" 
              :key="index"
              :class="{ active: mianji === item.value }"
              @click="clickmj(item.value)"
            >{{item.label}}</view>
          </view>

          <!-- 价格选择 -->
          <view class="filter-content grid" v-if="fwtype == 3">
            <view 
              class="filter-option" 
              v-for="(item,index) in jglist" 
              :key="index"
              :class="{ active: jiage === item.value }"
              @click="clickjg(item.value)"
            >{{item.label}}</view>
          </view>

          <!-- 更多筛选 -->
          <view class="filter-content" v-if="fwtype == 4">
            <view class="filter-section">
              <view class="section-title">拍卖方式</view>
              <view class="section-options">
                <view 
                  class="filter-option" 
                  v-for="(item,index) in pmfslist"
                  :key="index"
                  :class="{ active: pmfs === item.value }"
                  @click="clickfs(item.value)"
                >{{item.label}}</view>
              </view>
            </view>
            <view class="filter-section">
              <view class="section-title">拍卖状态</view>
              <view class="section-options">
                <view 
                  class="filter-option" 
                  v-for="(item,index) in pmztlist"
                  :key="index"
                  :class="{ active: pmzt === item.value }"
                  @click="clickzt(item.value)"
                >{{item.label}}</view>
              </view>
            </view>
          </view>

          <!-- 底部按钮 -->
          <view class="filter-footer">
            <view class="reset-btn" @click="chonzhi">
              <u-icon name="reload" color="#666" size="14"></u-icon>
              <text>重置</text>
            </view>
            <u-button @click="close" type="primary" text="确定"></u-button>
          </view>
        </view>
      </u-popup>

      <tabbar :current="0" :tabBarList="tabBerLists"></tabbar>
    </view>
	</z-paging>
</template>

<script>
	import {
		housingresourcepage,
		housingresource
	} from "../../api/index.js"
	import tabbar from "@/components/tab-bar/tab-bar.vue"
	export default {
		data() {
			return {
        items: ['住宅', '商业'],
        current: 0,
        housingType: 1,
        agentMobile:'',
				indexList: [],
				fwtype: 0,
				fwshow: false,
				tabBerLists: [],
				quyu:'',
				mianji:'',
				jiage:'',
				pmzt:'',
				pmfs:'',
				quyulist: [
					'不限',
					'渝中区',
					'江北区',
					'渝北区',
					'九龙坡区',
					'沙坪坝区',
					'南岸区',
					'巴南区',
					'大渡口区',
					'北碚区'
				],
				mjlist: [{
						"label": "不限",
						"value": ""
					},{
						"label": "50m²以下",
						"value": "1-50"
					},
					{
						"label": "50-70m²",
						"value": "50-70"
					},
					{
						"label": "70-90m²",
						"value": "70-90"
					},
					{
						"label": "90-120m²",
						"value": "90-120"
					},
					{
						"label": "120-150m²",
						"value": "120-150"
					},
					{
						"label": "150-200m²",
						"value": "150-200"
					},
					{
						"label": "200-300m²",
						"value": "200-300"
					},
					{
						"label": "300m²以上",
						"value": "300-3000"
					}
				],
				jglist: [{
						"label": "不限",
						"value": ""
					},{
						"label": "50万以下",
						"value": "1-50"
					},
					{
						"label": "50-100万",
						"value": "50-100"
					},
					{
						"label": "100-150万",
						"value": "100-150"
					},
					{
						"label": "150-200万",
						"value": "150-200"
					},
					{
						"label": "200-300万",
						"value": "200-300"
					},
					{
						"label": "300-400万",
						"value": "300-400"
					},
					{
						"label": "400-500万",
						"value": "400-500"
					},
					{
						"label": "500-700万",
						"value": "500-700"
					},
					{
						"label": "700-1000万",
						"value": "700-1000"
					},
					{
						"label": "1000万以上",
						"value": "1000"
					}
				],
				pmfslist: [
					{
						"label": "不限",
						"value": ""
					},
					{
						"label": "一拍",
						"value": "一拍"
					},
					{
						"label": "二拍",
						"value": "二拍"
					},
					{
						"label": "变卖",
						"value": "变卖"
					},
					{
						"label": "其他",
						"value": "其他"
					}
					
				],
				pmztlist: [{
						"label": "不限",
						"value": ""
					},{
						"label": "未起拍",
						"value": "0"
					},
					{
						"label": "竞拍中",
						"value": "1"
					},
					{
						"label": "已结束",
						"value": "2"
					},
				],
				pageNo: 1,
				pageSize: 30
			};
		},
		onLoad() {
			this.tabBerLists = uni.getStorageSync('tabBarList') // 自定义的tabbar赋值
		},
    onShow(){
      let userinfo = uni.getStorageSync('userInfo')
      if (userinfo!=null){
          this.agentMobile = userinfo.mobile
      }
    },
		methods: {
      onClickItem(e) {
        console.log(e)
        if (this.current !== e.currentIndex) {
          this.current = e.currentIndex
        }
        if (e.currentIndex==0){
          this.housingType = 1;
        }else if (e.currentIndex==1){
          this.housingType = 2;
        }
        housingresourcepage({
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          housingType: this.housingType,
          address: this.quyu,
          area: this.mianji,
          marketPrice: this.jiage,
          auctionNumber: this.pmfs,
          auctionState: this.pmzt,
          title: this.title
        }).then(res => {
          this.indexList = res.data.list
          //this.$refs.paging.complete(res.data.list)
        });
      },
			onShareAppMessage() {
				return {
					title: '房源列表',
					success: function(res) {
						// 转发成功  
					},
					fail: function(err) {
						// 转发失败  
					}
				}
			},
			open() {
				// console.log('open');
			},
			close() {
				this.fwshow = false
				this.gethousingresourcepg();
				// console.log('close');
			},
			clickqy(val) {
					this.quyu = val;
			},
			clickmj(val) {
				this.mianji = val;
			},
			clickjg(val) {
				this.jiage = val;
			},
			clickfs(val) {
					this.pmfs = val;
			},
			clickzt(val) {
				this.pmzt = val;
			},
			fytc(type) {
				this.fwtype = type;
			},
			openfw(type) {
				this.fwshow = true
				this.fwtype = type
			},
			change(e) {
				this.title = e
				this.gethousingresourcepg()
			},
			tofwtail(id) {
				// let userInfo = uni.getStorageSync('userInfo')
				// if (!userInfo) {
				// 	uni.navigateTo({
				// 		url: '/pages/login/mobile'
				// 	})
				// 	return
				// }
				uni.navigateTo({
					url: `/pages/index/fangwuDetail?id=${id}&scene=`
				})
			},
			gethousingresourcepg() {

				housingresourcepage({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
          housingType: this.housingType,
					address: this.quyu,
					area: this.mianji,
					marketPrice: this.jiage,
					auctionNumber: this.pmfs,
					auctionState: this.pmzt,
					title: this.title

				}).then(res => {
					this.indexList = res.data.list

				})
			},
			tosalesmanDetail() {
				uni.navigateTo({
					url: "/pages/index/salesmanDetail"
				})
			},
			queryList(pageNo, pageSize) {
				housingresourcepage({
					pageNo: pageNo,
					pageSize: pageSize,
          housingType: this.housingType,
					address: this.quyu,
					area: this.mianji,
					marketPrice: this.jiage,
					auctionNumber: this.pmfs,
					auctionState: this.pmzt,
					title: this.title
				}).then(res => {
					this.$refs.paging.complete(res.data.list)
				});
			},
			chonzhi() {
				this.quyu = '';
				this.mianji = '';
				this.jiage = '';
				this.pmzt = '';
				this.pmfs = '';
			this.queryList(1,30)
			},
			//时间戳转换
			getTime(time) {
				let data = new Date(time);
				let year = data.getFullYear();
				let month = data.getMonth() + 1;
				let day = data.getDate();
				let h = data.getHours();
				let mm = data.getMinutes();
				let s = data.getSeconds();
				month = month >= 10 ? month : "0" + month;
				day = day >= 10 ? day : "0" + day;
				h = h >= 10 ? h : "0" + h;
				mm = mm >= 10 ? mm : "0" + mm;
				s = s >= 10 ? s : "0" + s;
				return `${year}-${month}-${day} ${h}:${mm}`;
			},
		}
	}
</script>

<style lang="scss">
.page-container {
  padding: 20rpx;
}

.segment-control {
  margin-bottom: 20rpx;
}

.search-bar {
  margin-bottom: 20rpx;
}

.filter-bar {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);

  .filter-item {
    display: flex;
    align-items: center;
    color: #333;
    font-size: 28rpx;
    
    text {
      margin-right: 6rpx;
    }
  }
}

.house-list {
  .house-item {
    background-color: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
  }

  .house-image {
    position: relative;
    height: 360rpx;
    
    image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .house-title {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 20rpx;
      background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
      color: #fff;
      font-size: 28rpx;
    }

    .auction-tag {
      position: absolute;
      top: 20rpx;
      right: 20rpx;
      padding: 6rpx 20rpx;
      background-color: #2b4af7;
      color: #fff;
      border-radius: 30rpx;
      font-size: 24rpx;

      &.ongoing {
        background-color: #f74d3c;
      }

      &.ended {
        background-color: #999;
      }
    }
  }

  .house-info {
    padding: 20rpx;

    .house-header {
      margin-bottom: 16rpx;

      .auction-number {
        background-color: #f74d3c;
        color: #fff;
        padding: 4rpx 12rpx;
        border-radius: 4rpx;
        font-size: 24rpx;
        margin-right: 10rpx;
      }

      .house-name {
        font-size: 30rpx;
        color: #333;
        font-weight: 500;
      }
    }

    .house-tags {
      margin-bottom: 16rpx;

      .area-tag {
        border: 1px solid #2b4af7;
        color: #2b4af7;
        padding: 4rpx 16rpx;
        border-radius: 4rpx;
        font-size: 24rpx;
        margin-right: 10rpx;
      }

      .discount-tag {
        border: 1px solid #999;
        color: #999;
        padding: 4rpx 16rpx;
        border-radius: 4rpx;
        font-size: 24rpx;
      }
    }

    .price-info {
      display: flex;
      margin-bottom: 16rpx;

      .price-item {
        margin-right: 30rpx;

        .label {
          color: #666;
          font-size: 24rpx;
          margin-right: 8rpx;
        }

        .value {
          color: #333;
          font-size: 28rpx;
          font-weight: 500;

          &.highlight {
            color: #f74d3c;
          }
        }
      }
    }

    .auction-info {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .time {
        color: #2b4af7;
        font-size: 24rpx;
        background-color: #f0f2f7;
        padding: 4rpx 16rpx;
        border-radius: 20rpx;
      }

      .status {
        color: #2b4af7;
        font-size: 24rpx;
        background-color: #f0f2f7;
        padding: 4rpx 16rpx;
        border-radius: 20rpx;
      }
    }
  }
}

.filter-popup {
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  padding: 20rpx;

  .filter-tabs {
    display: flex;
    justify-content: space-around;
    margin-bottom: 30rpx;

    .filter-tab {
      display: flex;
      align-items: center;
      color: #666;
      font-size: 28rpx;

      &.active {
        color: #2b4af7;
        font-weight: 500;
      }

      .u-icon {
        margin-left: 6rpx;
      }
    }
  }

  .filter-content {
    padding: 20rpx;

    &.grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20rpx;
    }

    .filter-option {
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      background-color: #f8f8f8;
      color: #666;
      font-size: 28rpx;
      border-radius: 8rpx;
      margin-bottom: 20rpx;

      &.active {
        background-color: #e9f0fc;
        color: #2b4af7;
      }
    }
  }

  .filter-section {
    margin-bottom: 30rpx;

    .section-title {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 20rpx;
      font-weight: 500;
    }

    .section-options {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20rpx;
    }
  }

  .filter-footer {
    display: flex;
    align-items: center;
    padding: 20rpx;
    border-top: 1px solid #eee;

    .reset-btn {
      display: flex;
      align-items: center;
      margin-right: 20rpx;
      color: #666;
      font-size: 28rpx;

      .u-icon {
        margin-right: 6rpx;
      }
    }

    .u-button {
      flex: 1;
    }
  }
}
</style>